<script setup name="I18nSelector">
import { getElementLocales } from '@/locales'

const { proxy } = getCurrentInstance()
const route = useRoute()

import { useSettingsStore } from '@/store/modules/settings'
const settingsStore = useSettingsStore()

const locales = computed(() => getElementLocales())

const generateI18nTitle = inject('generateI18nTitle')

function languageCommand(command) {
    proxy.$i18n.locale = command
    settingsStore.setDefaultLang(command)
    route.meta.title && settingsStore.setTitle(generateI18nTitle(route.meta.i18n, route.meta.title), false)
}
</script>

<template>
    <el-dropdown v-if="settingsStore.toolbar.enableI18n" class="language-container" size="default" @command="languageCommand">
        <slot />
        <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item v-for="(item, index) in locales" :key="index" :disabled="settingsStore.app.defaultLang === item.name" :command="item.name">{{ item.labelName }}</el-dropdown-item>
            </el-dropdown-menu>
        </template>
    </el-dropdown>
</template>
